import React, { Component } from 'react'
import { Icon } from 'react-vant';
import axios from '../utils/request'
import bedonce from '../utils/bedonce'

export default class GiftList extends Component {

    state = {
        list: [],
    }

    go = () => {
        this.props.history.goBack(-1)
    }

    componentDidMount() {
        axios.post('/api/giftList').then(res => {
            // console.log(res);
            this.setState({
                list: res.data.data
            })
        })
    }
    //搜索商品列表
    search(e) {
        bedonce(() => {
            axios.post('/api/search1', { value: e }).then(res => {
                console.log(res);
                this.setState({
                    list: res.data.data
                })
            })
        }, 1000)

    }

    togiftdetail(item) {
        this.props.history.push(`/giftdetail/${item.id}`)
    }

    render() {
        const { list } = this.state
        return (
            <div className="wrap">
                <header>
                    <div className="detail">
                        <Icon name="arrow-left" className='icons' onClick={() => { this.go() }} />
                        <span>药单列表</span>
                    </div>
                </header>
                <main>
                    <div className="gift">
                        <div className="sea">
                            <Icon name="search" />
                            <input type="text" placeholder="请输入药品名" onChange={(e) => { this.search(e.target.value) }} />
                        </div>
                    </div>
                    {
                        list.map((item, index) => {
                            return <div className="giftLists" key={item.id} onClick={() => { this.togiftdetail(item) }}>
                                <img src={item.img} alt="" />
                                <div className="gifts">
                                    <p>{item.title}</p>
                                    <p>{item.guige}</p>
                                    <div className='p'>
                                        <div className="gif">
                                            <span>{item.price}</span>
                                            <span>{item.style}</span>
                                        </div>
                                        <span>{item.yaofang}</span >
                                    </div>
                                </div>
                            </div>
                        })
                    }
                </main>
            </div>
        )
    }
}
